<template>
    <div class="box">
        <div class="header">
            <h4>XXX学校后台系统</h4>
            <div class="main">
                <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick" :stretch="true">
                    <el-tab-pane label="登录" name="login">
                        <el-form ref="loginref" :rules="loginfrule" :model="logininfo" label-width="auto">
                            <el-form-item label="角色" prop="role">
                                <el-select v-model="logininfo.role" placeholder="请选择角色" size="large"
                                    style="width: 240px">
                                    <el-option label="学生" value="student" />
                                    <el-option label="教师" value="teacher" />
                                    <el-option label="管理员" value="admin" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="账号" prop="account">
                                <el-input v-model="logininfo.account" />
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                                <el-input v-model="logininfo.password" type="password" show-password />
                            </el-form-item>
                            <el-form-item label="验证码" prop="pictureCode">
                                <el-input v-model="logininfo.pictureCode" />
                            </el-form-item>
                            <el-form-item label="#">
                                <div @click="changekeys">
                                    <Canvas :identifyCode="canvasnum.identifyCode" :key="keys"></Canvas>
                                </div>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
                <div class="footer">
                    <el-button type="success" @click="loginbtn(loginref)">登录</el-button>
                    <el-button type="primary">忘记密码</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Canvas from '@/components/canvas.vue'
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
// @ts-ignore
import { login, rolelist } from '@/apis/login.js'
// @ts-ignore
import { Userstore } from '@/stores/user.js'
// @ts-ignore
import { roleStore } from '@/stores/role.js'
import router from '@/router';
const userstore = Userstore()
const rolestore = roleStore()
interface userifo {
    account: string,
    password: string,
    pictureCode: string,
    role: string
}
const loginref = ref<FormInstance>()
const activeName = ref('login')
const handleClick = (val: any) => {
    activeName.value = val.paneName
}
const canvasnum = ref({
    identifyCode: '2344'
})
const logininfo = ref<userifo>({
    account: '',
    password: '',
    pictureCode: '',
    role: ''
})
const loginfrule = ref<FormRules<userifo>>({
    account: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 6, max: 12, message: '输入6~12', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 16, message: '输入6~16', trigger: 'blur' },
    ],
    pictureCode: [
        { required: true, message: '请输入验证码', trigger: 'blur' }, {
            validator: (rule: any, value: any, cb: any) => {
                if (value != canvasnum.value.identifyCode) {
                    changekeys()
                    cb(new Error('验证码错误'))
                }
                cb()
            }, trigger: 'blur'
        }
    ],
    role: [
        { required: true, message: '请选择角色', trigger: 'blur' },
    ],
})
const getcanvasnum = () => {
    let numCode = "";
    for (var i = 0; i < 4; i++) {
        numCode += Math.floor(Math.random() * 10);
    }
    canvasnum.value.identifyCode = numCode;
}

const keys = ref(1)
const changekeys = () => {
    keys.value++
    getcanvasnum()
}
const loginbtn = async (formref: FormInstance | undefined) => {
    if (!formref) return
    await formref.validate(async (valid, fields) => {
        if (valid) {
            const { data } = await login(logininfo.value)
            if (data.status == 200) {
                userstore.getuserinfo(data)
                const res = await rolelist(logininfo.value)
                rolestore.getrolelist(res.data.data)
                router.replace({ path: '/home' })
            }
            changekeys()
        } else {
            ElMessage({ type: 'error', message: '数据校验失败' })
        }
    })
}
onMounted(() => {
    getcanvasnum()
})
</script>
<style lang="scss">
.box {
    .header {
        text-align: center;

        h4 {
            font-size: 50px;
        }

        .main {
            width: 400px;
            border: 1px solid black;
            border-radius: 20px;
            margin: 50px auto;

            .tabs {
                padding: 0 20px;
            }

            .footer {
                display: flex;
                justify-content: space-evenly;
                margin-bottom: 20px;
            }
        }

    }

}
</style>